<template>
	<div class="headertop" ref='headbgd' :class="{ aa:aa,bb:bb,cc:cc }">
		<input type="text" placeholder="请输入..." >
	</div>
</template>

<script>
	export default {
		name: 'HeaderTop',
		data(){
			return{
				aa: true,
				bb: false,
				cc: false
			}
		},
		mounted() {
			if(this.$route.path == '/newhome'){
				this.aa = true;
				this.bb = false;
				this.cc = false
			}else if(this.$route.path == '/duanshi'){
				this.cc = true;
				this.aa = false;
				this.bb = false;
			}else if(this.$route.path == '/moviehome'){
				this.cc = false;
				this.aa = false;
				this.bb = true;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.headertop{
		width: 100%;
		height: .44rem;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		input{
			width: 80%;
			height: .32rem;
			margin: .06rem 10%;
			border-radius: .17rem;
			border: 1px solid white;
			padding-left: .2rem;
			background-color: rgba(255,255,255,.2);
		}
		input::-webkit-input-placeholder{
			color: white;
		}
	}
	.aa{
		background-image: url(../assets/imger/xinwenbg.png);
	}
	.bb{
		background-image: url(../assets/imger/dianyingbg.png);
	}
	.cc{
		background-image: url(../assets/imger/duanshibg.png);
	}
</style>
